<template>
  <form action="">
    <span @click="ChangeShow">返回</span>
      <div><img src="../assets/icons/logo/logo_icon.png" alt=""></div>
    <label>用户名:<input 
        type="text" 
        v-model="username"
        @blur="check('username')" ></label>
    <label>账号:<input 
        type="text" 
        v-model="account"
        @blur="check('account')" ></label>
    <label class="iot_password">密码:<input 
        :type="eye[1]" 
        v-model="password"
        @blur="check('password')"><img :src="eyeImg[1]" alt="" @click="SeePassword(1)"></label>
    <label class="iot_password">确认密码:<input 
        :type="eye[2]" 
        v-model="ConfirmPassword"
        @blur="check('ConfirmPassword')"><img :src="eyeImg[2]" alt=""  @click="SeePassword(2)"></label>
    <div><van-button type="success" @click="Register">注册</van-button></div>
</form>
</template>

<script>
import { inject, reactive,ref } from 'vue';
export default {
    props:['log',
    'SeePassword',
    'eye',
    'eyeImg',
    'ChangeShow'],
    setup(props){
         //注册
         let RegisterFlog = reactive(['','','',''])
        function Register(){
            for(let i = 0; i < 4;i++){
                if(RegisterFlog[i] == ''){
                    if(i == 0){
                        props.log('用户名不能为空','#f56c6c')
                    }else if(i == 1){
                        props.log('账号不能为空','#f56c6c')
                    }else if(i == 2){
                        props.log('密码不能为空','#f56c6c')
                    }else if(i == 3){
                        props.log('确认密码不能为空','#f56c6c')
                    }
                    break
                }else if(RegisterFlog[i] == 'false'){
                    if(i == 0){
                        props.log('用户名格式错误','#f56c6c')
                    }else if(i == 1){
                        props.log('账号格式错误','#f56c6c')
                    }else if(i == 2){
                        props.log('密码格式错误','#f56c6c')
                    }else if(i == 3){
                        props.log('密码与确认密码不同','#f56c6c')
                    }
                    break
                }else{
                    if(i == 3){
                        Enter()
                    }
                }
            }
        }
        //检测
        let account = ref('')
        let password = ref('')
        let username = ref('')
        let ConfirmPassword = ref('')
        function check(type){
            if(type == 'username'){
                if(username.value == ''){
                    RegisterFlog[0] = ''
                }else if(username.value.length <= 6){
                    RegisterFlog[0] = 'true'
                }else{
                    RegisterFlog[0] = 'false'
                    props.log('用户名最多六字符','#f56c6c')
                }
            }else if(type == 'account'){
                if(account.value == ''){
                    RegisterFlog[1] = ''
                }else if(/^[0-9]+$/.test(account.value)){
                    RegisterFlog[1] = 'true'
                }else{
                    RegisterFlog[1] = 'false'
                    props.log('账号只能由数字组成','#f56c6c')
                }
            }else if(type == 'password'){
                if(password.value == ''){
                    RegisterFlog[2] = ''
                }else if(/^[a-zA-Z0-9]{6,}$/.test(password.value)){
                    RegisterFlog[2] = 'true'
                }else{
                    RegisterFlog[2] = 'false'
                    props.log('密码至少六位且只能由数字或字母组成','#f56c6c')
                }
            }else{
                if(ConfirmPassword.value == ''){
                    RegisterFlog[3] = ''
                }else if(ConfirmPassword.value != password.value){
                    props.log('密码与确认密码不同','#f56c6c')
                    RegisterFlog[3] = 'false'
                }
                else{
                    RegisterFlog[3] = 'true'
                }
            }
        }
        //录入
        const Goods = inject('Goods')
        const NewRegisterImformation = {
            account:account,
            password:password,
            username:username,
            cart:[]
        }
        let RegisterImformation = inject('RegisterImformation')
        let LoginIndex = inject('LoginIndex')
        function Enter(){
            if(RegisterImformation.length == 0){
                props.log('注册成功','#27ba9b')
                        RegisterImformation.push(NewRegisterImformation)
                        localStorage.setItem('Register',JSON.stringify(RegisterImformation))
                        for(let i = 0; i < RegisterImformation.length;i++){
                            RegisterImformation[i] = eval(localStorage.getItem("Register"))[i]
                        }
                        LoginIndex.value = RegisterImformation.length-1
                        Goods[14] = RegisterImformation[LoginIndex.value].cart
                        Goods[15] = RegisterImformation[LoginIndex.value]
                        console.log(RegisterImformation)
                        console.log(eval(localStorage.getItem("Register")))
            }else{
                for(let i = 0;i<RegisterImformation.length;i++){
                if(NewRegisterImformation.account == RegisterImformation[i].account){
                    props.log('账号已存在','#f56c6c')
                    break
                }else if(NewRegisterImformation.username == RegisterImformation[i].username){
                    props.log('用户名已存在','#f56c6c')
                    break
                }else{
                    if(i == RegisterImformation.length-1){
                        props.log('注册成功','#27ba9b')
                        RegisterImformation.push(NewRegisterImformation)
                        localStorage.setItem('Register',JSON.stringify(RegisterImformation))
                        for(let i = 0; i < RegisterImformation.length;i++){
                            RegisterImformation[i] = eval(localStorage.getItem("Register"))[i]
                        }
                        LoginIndex.value = RegisterImformation.length-1
                        Goods[14] = RegisterImformation[LoginIndex.value].cart
                        Goods[15] = RegisterImformation[LoginIndex.value]
                        console.log(RegisterImformation)
                        console.log(eval(localStorage.getItem("Register")))

                        break
                    }
                }
            }
            }
        }
        return {account,password,username,ConfirmPassword,check,
            Register}
    }
}
</script>

<style scoped>
form{
    display: flex;
    flex-direction: column;
    align-items: end;
}
span{
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    color: #c7c7c7;
}
form div{
    width: 100%;
    text-align: center;
}
img{
    width: 60px;
    margin: 0 0 20px;
}
input{
    border:0px;
    border-bottom: 1px solid #bdbdbd;
    margin: 0 0 20px 10px;
    outline: none;
}
button{
    width: 100px;
    background-color: #28ba9b;
}
.iot_password{
    position: relative;
}
.iot_password img{
    position:absolute;
    width: 26.8px;
    height: 26.8px;
    right: 0px;
    margin: 0;
}
</style>